<template>
  <Modal
    :value="value"
    :title="$srv.getI18nByPath(title)"
    :width="width"
    :draggable="isDraggable"
    :mask="isMask"
    :mask-closable="isMaskClosable"
    :fullscreen="isFullScreen"
    :ok-text="$srv.getI18nByPath(okText)"
    :cancel-text="$srv.getI18nByPath(cancelText)"
    :footer-hide="footerHide"
    ref="dialogBox"
    @on-visible-change="onVisibleChange"
    @on-ok="onOk"
    @on-cancel="onCancel"
  >
    <slot name="content"> </slot>
  </Modal>
</template>
<script lang="ts">
import { Tsrv, T_srv, ifs, ts, vue, N_oDialogBox } from './config';

@T_srv.comp
export default class dialogBox extends vue {
  // 标题
  @T_srv.prop({ type: String, required: false, default: 'undefined' })
  title: string;

  @T_srv.prop({ type: String, required: false, default: `ok` })
  okText: string;

  @T_srv.prop({ type: String, required: false, default: `cancel` })
  cancelText: string;

  // 宽度
  // 对话框宽度，对话框的宽度是响应式的，当屏幕尺寸小于 768px 时，
  // 宽度会变为自动auto。当其值不大于 100 时以百分比显示，大于 100 时为像素
  @T_srv.prop({ type: String, required: false, default: '400' })
  width: string;

  // 打开/关闭 窗口
  @T_srv.prop({ type: Boolean, required: false, default: false })
  value: boolean;

  // 是否可以拖动 打开拖动 是否显示遮罩层设备无效
  @T_srv.prop({ type: Boolean, required: false, default: true })
  isDraggable: boolean;

  // 是否显示遮罩层
  @T_srv.prop({ type: Boolean, required: false, default: true })
  isMask: boolean;

  // 是否点击遮罩关闭
  @T_srv.prop({ type: Boolean, required: false, default: true })
  isMaskClosable: boolean;

  // 是否全屏
  @T_srv.prop({ type: Boolean, required: false, default: false })
  isFullScreen: boolean;

  // 不显示底部
  @T_srv.prop({ type: Boolean, required: false, default: false })
  footerHide: boolean;

  @T_srv.ref() readonly dialogBox;

  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  private G_compName: string = 'dialogBox';

  private GT_compBoxInfo: ifs.I_compBoxInfo;

  private GT_compBox: ifs.I_compBox;

  private G_compID: string;

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_compBoxInfo = { compID: this.G_compID, TcompBox: this.GT_compBox };
  }

  mounted() {
    /* 向父组件发送实例 */
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 最终应用组件销毁 */
    /* this.GT_compBox.removeCompMergeName(this.G_compID, 'devBom','funName'); */

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
  }

  private onVisibleChange(p: boolean) {
    this.$emit('update:value', p);
    this.$emit('input', p);
    this.$emit('on-visible-change', p);
  }

  private onOk() {
    this.$emit('on-ok');
  }

  private onCancel() {
    this.$emit('on-cancel');
  }
}
</script>
<style lang="scss" scoped>
::v-deep .ivu-modal .ivu-modal-content {
  border: 1px solid var(--input-phcolor);
}
</style>
